<!-- 本DEMO演示简单过滤下拉选择器的用法 -->
<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">{{pageTitle}} <span class="text-subtitle1">杂七杂八的演示</span></div>
    <div class="shadow-2 q-pa-sm">
      <div class="text-h6">单值修改测试</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Val1</span>
          <q-input dense no-error-icon outlined square stack-label v-model="$d.val1">
            <template v-slot:after>
              <q-btn color="primary" @click="changeVal1">修改</q-btn>
            </template>
          </q-input>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Val2</span>
          <q-input dense no-error-icon outlined square stack-label v-model="$d.val2">
            <template v-slot:after>
              <q-btn color="primary" @click="changeVal2">修改</q-btn>
            </template>
          </q-input>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Val3</span>
          <q-input dense no-error-icon outlined square stack-label v-model="$d.val3">
            <template v-slot:after>
              <q-btn color="primary" @click="changeVal3">修改</q-btn>
            </template>
          </q-input>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Val4(日期)</span>
          <q-input dense no-error-icon outlined square stack-label v-model="$d.val4">
            <template v-slot:after>
              <q-btn color="primary" @click="changeVal4">修改</q-btn>
            </template>
          </q-input>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Val5(多格式日期)</span>
          <q-input dense no-error-icon outlined square stack-label v-model="$d.val5">
            <template v-slot:after>
              <q-btn color="primary" @click="changeVal5">修改</q-btn>
            </template>
          </q-input>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Val6(制造日期)</span>
          <q-input dense no-error-icon outlined square stack-label v-model="$d.val6">
            <template v-slot:after>
              <q-btn color="primary" @click="changeVal6">修改</q-btn>
            </template>
          </q-input>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Val7(单值提交string)</span>
          <q-input dense no-error-icon outlined square stack-label v-model="$d.val7">
            <template v-slot:after>
              <q-btn color="primary" @click="changeVal7">修改</q-btn>
            </template>
          </q-input>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Val8(单值提交bool)</span>
          <q-input dense no-error-icon outlined square stack-label v-model="$d.val8" readonly>
            <template v-slot:after>
              <q-btn color="primary" @click="changeVal8">修改</q-btn>
            </template>
          </q-input>
        </div>
      </div>
      <div class="text-h6">分摊测试</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>默认分摊三人,在输入框输入数值后点击分摊</span>
          <q-input dense no-error-icon outlined square stack-label v-model.number="$d.shareNum">
            <template v-slot:after>
              <q-btn color="primary" @click="shareEqually">平摊</q-btn>
            </template>
          </q-input>
          平摊结果为:{{shareArr}}
        </div>
      </div>
      <div class="text-h6 simple-border-top q-mt-md q-pt-md">消息框测试</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-3 col-lg-2">
          <q-btn color="primary" @click="msgbox1">MsgBox:OkCancel</q-btn>
        </div>
        <div class="col-12 col-sm-6 col-md-3 col-lg-2">
          <q-btn color="primary" @click="msgbox2">MsgBox:YesNo</q-btn>
        </div>
        <div class="col-12 col-sm-6 col-md-3 col-lg-2">
          <q-btn color="primary" @click="msgbox3">MsgBox:Delay1</q-btn>
        </div>
        <div class="col-12 col-sm-6 col-md-3 col-lg-2">
          <q-btn color="primary" @click="msgbox4">MsgBox:Delay2</q-btn>
        </div>
        <div class="col-12 col-sm-6 col-md-3 col-lg-2">
          <q-btn color="primary" @click="msgbox5">MsgBox:单纯文本</q-btn>
        </div>
      </div>

      <div class="text-h6 simple-border-top q-mt-md q-pt-md">全屏Loading测试</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <q-btn color="primary" @click="showScreenLoading1">showScreenLoading1</q-btn>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <q-btn color="primary" @click="showScreenLoading2">showScreenLoading2</q-btn>
        </div>
      </div>

      <div class="text-h6 simple-border-top q-mt-md q-pt-md">n2D:提取测试</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-md-6">
          <span>提取测试1，试试"1111|2222|3333"回车</span>
          <q-input dense no-error-icon outlined square stack-label v-model="$d.field1" @keyup.enter="extractDemo1"
            placeholder="回车提取第一段和第二段信息" />
        </div>
        <div class="col-12 col-md-6">
          <span>提取测试2，试试"n2D:1111|2222|3333|4444"回车</span>
          <q-input dense no-error-icon outlined square stack-label v-model="$d.field2" @keyup.enter="extractDemo2"
            placeholder="回车提取带前缀(n2D:)的第二段信息" />
        </div>
      </div>
      <div class="text-h6 simple-border-top q-mt-md q-pt-md">批量执行框测试</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col">
          <q-btn color="primary" @click="batchExecuteDemo1">批量执行测试</q-btn>
          <batch-execute-dlg v-model="$d.batchExecuteDlg1" :itemList="$d.batchExecuteItemList" @start="onExeStart"
            :executeState="$d.batchExecuteState" @stop="onExeStop" title="批量配货" item-name-col-width="150px"
            execute-btn-title="配货" @show="onShow" @hide="onHide"></batch-execute-dlg>
        </div>
      </div>
      <div class="text-h6 simple-border-top q-mt-md q-pt-md">EasyInput测试</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>最简</span>
          <easy-input v-model="$d.input1" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>带一些参数</span>
          <easy-input bg-color="red-2" v-model="$d.input2" placeholder="输入点啥呢..." append-icon-name="grade" :append-icon-show="true"
            :clearable="false" :maxlength="10" />
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>日期提取</span>
          <easy-input v-model="$d.input3" append-icon-show use-date-picker />
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>数字</span>
          <easy-input v-model="$d.input4" />
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>出错测试</span>
          <easy-input v-model="$d.input5" :error="true" error-message="出错了,blah blah..." />
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>只读测试</span>
          <easy-input v-model="$d.input6" readonly />
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>禁用测试</span>
          <easy-input v-model="$d.input7" disable />
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>其它</span>
          <easy-input select-all-on-focus v-model="$d.input8" />
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>这个不是EasyInput</span>
          <q-input clearable hide-bottom-space dense no-error-icon outlined square stack-label v-model="$d.input9">
            <template v-slot:append>
              <q-icon name="event" />
            </template>
          </q-input>
        </div>
      </div>
      <div class="text-h6 simple-border-top q-mt-md q-pt-md">日期比较验证测试</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Dt1(大于2021-12-10)</span>
          <easy-input v-model="$d.dt1" :append-icon-show="true" :use-date-picker="true" :error="v$Dt.dt1.$error"
            :error-message="e$(v$Dt.dt1.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Dt2(大于等于2021-12-10)</span>
          <easy-input v-model="$d.dt2" :append-icon-show="true" :use-date-picker="true" :error="v$Dt.dt2.$error"
            :error-message="e$(v$Dt.dt2.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Dt3(小于2021-12-15)</span>
          <easy-input v-model="$d.dt3" :append-icon-show="true" :use-date-picker="true" :error="v$Dt.dt3.$error"
            :error-message="e$(v$Dt.dt3.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Dt4(小于等于2021-12-15)</span>
          <easy-input v-model="$d.dt4" :append-icon-show="true" :use-date-picker="true" :error="v$Dt.dt4.$error"
            :error-message="e$(v$Dt.dt4.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Dt5(2021-12-10与2021-12-15之间,开区间)</span>
          <easy-input v-model="$d.dt5" :append-icon-show="true" :use-date-picker="true" :error="v$Dt.dt5.$error"
            :error-message="e$(v$Dt.dt5.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Dt6</span>
          <easy-input v-model="$d.dt6" :append-icon-show="true" :use-date-picker="true" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Dt7(Dt6和Dt8之间,闭区间)</span>
          <easy-input v-model="$d.dt7" :append-icon-show="true" :use-date-picker="true" :error="v$Dt.dt7.$error"
            :error-message="e$(v$Dt.dt7.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Dt8</span>
          <easy-input v-model="$d.dt8" :append-icon-show="true" :use-date-picker="true" />
        </div>
      </div>
      <div class="text-h6 simple-border-top q-mt-md q-pt-md">数值比较验证测试</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Number1(大于0)</span>
          <easy-input v-model="$d.number1" :error="v$Num.number1.$error" :error-message="e$(v$Num.number1.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Number2(大于等于0)</span>
          <easy-input v-model="$d.number2" :error="v$Num.number2.$error" :error-message="e$(v$Num.number2.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Number3(小于0)</span>
          <easy-input v-model="$d.number3" :error="v$Num.number3.$error" :error-message="e$(v$Num.number3.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Number4(小于等于0)</span>
          <easy-input v-model="$d.number4" :error="v$Num.number4.$error" :error-message="e$(v$Num.number4.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Number5(5~10,开区间)</span>
          <easy-input v-model="$d.number5" :error="v$Num.number5.$error" :error-message="e$(v$Num.number5.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Number6</span>
          <easy-input v-model="$d.number6" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Number5(Number6~Number8,闭区间)</span>
          <easy-input v-model="$d.number7" :error="v$Num.number7.$error" :error-message="e$(v$Num.number7.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Number8</span>
          <easy-input v-model="$d.number8" />
        </div>
      </div>
      <div class="text-h6 simple-border-top q-mt-md q-pt-md">通用正则验证测试</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>手机号码</span>
          <easy-input v-model="$d.regInput1" :error="v$Reg.regInput1.$error"
            :error-message="e$(v$Reg.regInput1.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>使用旧身份证号</span>
          <div class="bg-grey-3">
            <q-checkbox dense class="full-width q-pa-xs" color="primary" v-model="$d.useOldIdCardType"></q-checkbox>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>身份证号</span>
          <easy-input v-model="$d.regInput2" :error="v$Reg.regInput2.$error"
            :error-message="e$(v$Reg.regInput2.$errors)" />
        </div>
      </div>
      <div class="text-h6 simple-border-top q-mt-md q-pt-md">返回多行错误信息的呈现</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <q-btn color="primary" @click="errorListDisp1">多行错误呈现1</q-btn>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <q-btn color="primary" @click="errorListDisp2">多行错误呈现2</q-btn>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <q-btn color="primary" @click="errorListDisp3">多行错误呈现3</q-btn>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <q-btn color="primary" @click="errorListDisp4">多行错误呈现4</q-btn>
        </div>
      </div>
      <div class="text-h6 simple-border-top q-mt-md q-pt-md">Word文档导出 <small><a
        :href="exportDocxDemoUrl">点击我下载</a></small></div>
      <div class="col-12">
        Word文档(docx)的生成是借助了SharpDocx库(https://github.com/egonl/SharpDocx)，它的设计思想非常直截了当，就是模板+数据=&gt;输出，模板内可以使用C#的语法来控制分支/循环，十分灵活。有需要来询。
      </div>
      <div class="text-h6 simple-border-top q-mt-md q-pt-md">控件DEMO</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <q-btn-dropdown color="primary" label="带下拉的按钮">
            <q-list dense>
              <q-item clickable v-close-popup @click="onMenuItem1Clicked">
                <q-item-section avatar>
                  <q-icon name="fiber_manual_record"></q-icon>
                </q-item-section>
                <q-item-section>
                  <q-item-label>打印拣货清单</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="onMenuItem2Clicked">
                <q-item-section avatar>
                  <q-icon name="fiber_manual_record"></q-icon>
                </q-item-section>
                <q-item-section>
                  <q-item-label>打印拣货清单(汇总)</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-btn icon="help" color="info" title="打印拣货清单(汇总)说明" size="xs" dense
                    @click.stop="onMenuItem1HelpClicked">帮助
                  </q-btn>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </div>
      </div>
      <div class="text-h6 simple-border-top q-mt-md q-pt-md">自定义验证错误提示</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>长度5以内会报错(非必填)</span>
          <q-input dense no-error-icon outlined square stack-label hide-bottom-space v-model="$d.customValTest1"
            :error="v$CustomVal1.customValTest1.$error" :error-message="e$(v$CustomVal1.customValTest1.$errors)">
            <template v-slot:after>
              <q-btn size="sm" color="primary" @click="doCustomVal1">验证</q-btn>
              <q-btn size="sm" color="primary" @click="resetCustomVal1">重置</q-btn>
            </template>
          </q-input>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>长度5以上会报错(必填)</span>
          <q-input dense no-error-icon outlined square stack-label hide-bottom-space v-model="$d.customValTest2"
            :error="v$CustomVal2.customValTest2.$error" :error-message="e$(v$CustomVal2.customValTest2.$errors)">
            <template v-slot:after>
              <q-btn size="sm" color="primary" @click="doCustomVal2">验证</q-btn>
              <q-btn size="sm" color="primary" @click="resetCustomVal2">重置</q-btn>
            </template>
          </q-input>
        </div>
      </div>

      <div class="text-h6 simple-border-top q-mt-md q-pt-md">时间选择器</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Time1</span>
          <easy-input v-model="$d.time1" :append-icon-show="true" :use-time-picker="true" :error="v$Time.time1.$error"
            :error-message="e$(v$Time.time1.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Time2</span>
          <easy-input v-model="$d.time2" :append-icon-show="true" :use-time-picker="true" :error="v$Time.time2.$error"
            :error-message="e$(v$Time.time2.$errors)" use-five-minute-precision />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>Time3(带秒的时间验证器)</span>
          <easy-input v-model="$d.time3" :append-icon-show="true" :use-time-picker="true" :error="v$Time.time3.$error"
            :error-message="e$(v$Time.time3.$errors)" use-five-minute-precision />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>DateTime1</span>
          <easy-input v-model="$d.datetime1" :append-icon-show="true" use-date-picker use-time-picker
            :error="v$Time.datetime1.$error"
            :error-message="e$(v$Time.datetime1.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>DateTime2</span>
          <easy-input v-model="$d.datetime2" :append-icon-show="true" use-date-picker use-time-picker
            :error="v$Time.datetime2.$error"
            :error-message="e$(v$Time.datetime2.$errors)" use-five-minute-precision />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>DateTime3(5分钟精度)</span>
          <easy-input v-model="$d.datetime3" :append-icon-show="true" use-date-picker use-time-picker
            :error="v$Time.datetime3.$error"
            :error-message="e$(v$Time.datetime3.$errors)" use-five-minute-precision />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>DateTime4(>DateTime3)</span>
          <easy-input v-model="$d.datetime4" :append-icon-show="true" use-date-picker use-time-picker
            :error="v$Time.datetime4.$error"
            :error-message="e$(v$Time.datetime4.$errors)" />
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>DateTime5(含默认日期)</span>
          <easy-input v-model="$d.datetime5" :append-icon-show="true" use-date-picker use-time-picker
            :error="v$Time.datetime5.$error" default-date-for-picker="2022-02-12"
            :error-message="e$(v$Time.datetime5.$errors)" />
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>DateTime6(含默认时间)</span>
          <easy-input v-model="$d.datetime6" :append-icon-show="true" use-date-picker use-time-picker
            :error="v$Time.datetime6.$error" default-time-for-picker="11:11"
            :error-message="e$(v$Time.datetime6.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>DateTime7(含默认日期时间)</span>
          <easy-input v-model="$d.datetime7" :append-icon-show="true" use-date-picker use-time-picker
            :error="v$Time.datetime7.$error" default-time-for-picker="08:30" default-date-for-picker="2022-09-29"
            :error-message="e$(v$Time.datetime7.$errors)" />
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <span>DateTime8(更少的时间选择区间)</span>
          <easy-input v-model="$d.datetime7" :append-icon-show="true" use-date-picker use-time-picker
            :error="v$Time.datetime7.$error" :minutes-options="$d.dtHalf"
            :error-message="e$(v$Time.datetime7.$errors)" />
        </div>

      </div>

      <div class="text-h6 simple-border-top q-mt-md q-pt-md">日期选择器多语言DEMO</div>
      <div class="row q-col-gutter-sm q-pb-sm col-12">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <q-date :title="$d.dt9" v-model="$d.dt9" :locale="myLocale" mask="YYYY-MM-DD" />
        </div>
        <span>{{$d.dt9}}</span>
      </div>

    </div>
    <form-field-group class="q-mt-md" title="单时间选择器demo">
      <div class="q-pa-sm">
        <div>时间:  <span class="bg-grey-3 simple-border text-weight-bold">{{$d.time4}}</span></div>
        <div class="row">
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span style="display:block; min-height: 3em" class="q-pr-md">默认timePicker 不传入小时和分钟选项时显示的选择范围为24小时分钟为5分钟刻度</span>
            <time-picker v-model="$d.time4" :title="$d.time4"/>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span style="display:block; min-height: 3em" class="q-pr-md">限制可选择的小时范围,若当前时间不在可选择的范围内那么点击当前时间按钮不会选中当前时间</span>
            <time-picker v-model="$d.time4" :title="$d.time4" :hour-options="['11','12','13','14','15','16','17']"/>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span style="display:block; min-height: 3em" class="q-pr-md">自定义分钟选择</span>
            <time-picker v-model="$d.time4" :title="$d.time4" :minute-options="['00','30']"/>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span style="display:block; min-height: 3em" class="q-pr-md">自定义分钟选择</span>
            <time-picker v-model="$d.time4" :title="$d.time4" :minute-options="['00','10','20','30','40','50']"/>
          </div>
        </div>
      </div>
    </form-field-group>
    <form-field-group class="q-mt-md" title="样式DEMO">
      <div class="q-pa-sm">
        <div class="row q-col-gutter-sm">
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>这个DIV用于展示把DIV样式做成和easyinput的readyonly样式统一，可以在里面加q-chip等内容</span>
            <div class="pseudo-readonly-input">
              这里写内容
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>这个DIV用于展示把DIV样式做成和easyinput的readyonly样式统一，可以在里面加q-chip等内容</span>
            <div class="pseudo-readonly-input">
              <q-chip class="q-ma-none" label="这是qchip" size="md"
                color="primary" dense text-color="white" square />
            </div>
          </div>
        </div>
      </div>
    </form-field-group>
    <form-field-group class="q-mt-md" title="标题1" modelId="orderId" :model-with-create-update="groupModel1">
      <div class="q-pa-md">form-field-group demo 1</div>
    </form-field-group>
    <form-field-group class="q-mt-md" title="标题2" modelId="orderId" :model-with-create-update="groupModel2">
      <div class="q-pa-md">form-field-group demo 2</div>
    </form-field-group>
    <form-field-group class="q-mt-md" title="标题3" modelId="orderId" :model-with-create-update="groupModel3">
      <div class="q-pa-md">form-field-group demo 3</div>
    </form-field-group>
    <form-field-group class="q-mt-md" title="标题4" modelId="orderId" :model-with-create-update="groupModel4">
      <div class="q-pa-md">form-field-group demo 4</div>
    </form-field-group>
    <form-field-group class="q-mt-md" title="标题5" modelId="orderId" :model-with-create-update="groupModel5">
      <div class="q-pa-md">form-field-group demo 5</div>
    </form-field-group>
    <form-field-group class="q-mt-md" title="测试弹窗再弹窗后点击堆栈溢出问题" :model-with-create-update="groupModel6">
      <div class="q-pa-sm">
        <q-btn label="测试" color="primary" @click="$d.showDialog = true" />
      </div>
      <q-dialog transition-hide="none" transition-show="none" v-model="$d.showDialog">
        <q-card style="max-width: 700px; width: 100%">
          <q-card-section>
            <div class="text-h6">测试dialog里的menu弹窗是否会出现堆栈溢出问题</div>
          </q-card-section>
          <q-separator />
          <q-card-section>
            <q-btn color="primary" label="展开">
              <q-menu>
                <q-list style="min-width: 100px">
                  <q-item clickable>
                    1
                  </q-item>
                  <q-item clickable>
                    2
                  </q-item>
                  <q-item clickable>
                    3
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-card-section>
          <!--错误提示-->
          <div class="q-pa-sm">
            <div class="row q-col-gutter-sm q-pt-sm">
              <div class="col-12 col-sm-6 col-md-4">
                <q-icon color="red" name="fas fa-asterisk" />
                <span>实际加班开始时间</span>
                <easy-input v-model="$d.date1" append-icon-show use-date-picker
                  use-time-picker
                  use-five-minute-precision>
                </easy-input>
              </div>
              <div class="col-12 col-sm-6 col-md-4">
                <q-icon color="red" name="fas fa-asterisk" />
                <span>实际加班结束时间</span>
                <easy-input v-model="$d.date2" append-icon-show use-date-picker
                  use-time-picker
                  use-five-minute-precision>
                </easy-input>
              </div>
            </div>
          </div>
        </q-card>

      </q-dialog>
    </form-field-group>

    <form-field-group class="q-mt-md" title="长参数GET请求DEMO">
      <div class="q-pa-sm">
        <p>有些GET请求需要带很长的参数，比如一个ID的列表，这时候GET请求的URL的长度可能过长，不能直接GET，解决方法是先使用一个POST把
          长参数暂存到服务器(用Redis)，返回一个GUID，然后再以这个GUID作为参数发起GET请求，业务处理方法拿到这个GUID之后到暂存区(Redis)
          取出完整的参数，此方法仅仅能通过application/json格式传递参数，会以字符串的形式保存，在取出时反序列化为对象。此方法还有个弊端，
          就是对GET的结果不能再次使用GUID刷新，毕竟准备的参数是临时的。
        </p>
        <p>
          方法：对<code>/comm/utils/prepare-long-params</code>发起POST，将参数（比如一个int[]）以JSON格式提交上去，返回结果是一个string（GUID），
          这个GUID就是后续方法的参数令牌，后续方法调用例子：
          <code>GET /utils-test/long-params-test?paramsUuid=1b634146-cbc6-48ea-b48f-b0270fd8719c</code>
        </p>
        <p>
          本例子尝试将这个“巨大”的int数组作为参数传上去：[1,2,3,4,11,22,33,44,1234,5678,9011,1213,8848,9910]
          <q-btn color="primary" @click="longParamGetActionDemo">测试(F12看结果)</q-btn>
        </p>
      </div>
    </form-field-group>

    <form-field-group class="q-mt-md" title="验证器动态测试" modelId="orderId">
      <div class="row q-col-gutter-sm q-pa-sm">
        <p>当前针对部分项目(如WMS)中部分验证器规则为动态的,即请求服务器后才能确定验证规则(是否必填,设置的正则规则等),如此以来就涉及到规则验证器
          也需要跟随一起动态变化,这里针对验证器动态变化做出一个小demo,期初验证规则只为毛重净重必填,点击按钮模拟请求后变为毛重净重必须为INT32类型
          ,测试起来也不复杂,第一次输入ABC验证通过,点击按钮后提示格式错误(因为添加了INT32验证规则)</p>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3" v-for="(value, index) in $d.receiveInfo" :key="index"
          v-show="(index > 1) || (index <= 1 && value.isMandatory)">
          <q-icon color="red" name="fas fa-asterisk" size="10px" v-if="value.isMandatory" />
          <span>{{value.label}}</span>
          <q-input :hide-bottom-space="true" dense clearable no-error-icon outlined square stack-label
            v-model="$d.form[value.fieldName]" v-if="(value.fieldName !== 'gw') && (value.fieldName !== 'cube')"
            :error="v$Form.form[value.fieldName].$error" :error-message="e$(v$Form.form[value.fieldName].$errors)">
          </q-input>
          <q-input :hide-bottom-space="true" dense v-if="value.fieldName === 'cube'"
            clearable no-error-icon outlined square stack-label v-model="$d.cube"
            :error="v$Form['cube'].$error" :error-message="e$(v$Form['cube'].$errors)">
          </q-input>
          <q-input :hide-bottom-space="true" dense v-if="value.fieldName === 'gw'"
            no-error-icon outlined square stack-label v-model="$d.form.gw"
            :error="v$Form.form['gw'].$error" :error-message="e$(v$Form.form['gw'].$errors)">
          </q-input>
        </div>
        <div class="col-12">
          <q-btn color="primary" @click="changeRules">点我变一下验证规则</q-btn>
        </div>
      </div>
    </form-field-group>

    <form-field-group class="q-mt-md" title="文本替换">
      <div class="row q-col-gutter-sm q-pa-sm">
        <pre class="bg-grey-2 q-ml-md">{{labelAltTextsData}}</pre>
        <div class="col-12"><code>const T = $f.prepareAltLabelTextsFunc('foundation', 'company')</code></div>
        <div class="col-12"><code>T('内部标识','恩及通内部标识')</code>
          <q-chip>{{T('内部标识', '恩及通内部标识')}}</q-chip>
        </div>
        <div class="col-12"><code>T('内部标识')</code>
          <q-chip>{{T('内部标识')}}</q-chip>
        </div>
        <div class="col-12"><code>T('custom1', '企业工商变更信息')</code>
          <q-chip>{{T('custom1', '企业工商变更信息')}}</q-chip>
        </div>
        <div class="col-12"><code>T('custom1')</code>
          <q-chip>{{T('custom1')}}</q-chip>
        </div>
      </div>
    </form-field-group>

    <form-field-group class="q-mt-md" title="响应式显示/隐藏">
      <div class="xs bg-green-2 q-ma-sm" style="width: 200px;height: 200px">这个div会在宽度为xs时展示</div>
      <div class="gt-xs bg-red-2 q-ma-sm" style="width: 400px; height: 200px">这个div会在宽度大于xs时展示</div>
      <div></div>
    </form-field-group>
  </q-page>
</template>
<script lang="ts" setup>
import _ from 'lodash'
import {useTitleHelper} from '../../lib/hooks/titleHelper'
import {computed, onMounted, reactive, ref} from 'vue'
import {BatchExecuteItem, ErrorListDisplayParams} from '../../lib/defs/comm'
import {useVuelidate} from '@vuelidate/core'
import FormFieldGroup from '../../lib/components/FormFieldGroup.vue'
import {labelAltTextsData} from '../../lib/helper/label-alt-texts'

const pageTitle = '杂项DEMO'
useTitleHelper(pageTitle)

const $d = reactive({
  // 修改单值测试
  val1: 100,
  val2: 'Abcd',
  val3: null,
  val4: '2021-09-16',
  val5: '21/12/28',
  val6: '202153',
  val7: '',
  val8: false,
  isPrintCanceled: false,

  // 分摊测试
  shareNum: null as number | null,
  // 扫码信息提取测试
  field1: '',
  field2: '',

  // 批量执行dialog
  batchExecuteDlg1: false,
  batchExecuteState: false,
  batchExecuteStoppingFlag: false,
  batchExecuteItemList: [] as BatchExecuteItem[],

  // EasyInput测试
  input1: null,
  input2: '',
  input3: '2022-04-04',
  input4: 4,
  input5: 'error',
  input6: '测试文本ABCD',
  input7: '测试文本1234',
  input8: '聚焦选中全部',
  input9: 'blah blah blah...',

  // 日期相关验证测试
  dt1: '2021-12-10',
  dt2: '2021-12-09',
  dt3: '2021-12-15',
  dt4: '2021-12-16',
  dt5: '2021-12-31',
  dt6: '2021-12-10',
  dt7: '2021-12-31',
  dt8: '2021-12-15',

  dt9: '2023-11-17',

  // 数值验证
  number1: 0,
  number2: -1,
  number3: 0,
  number4: 1,
  number5: 5,
  number6: 5,
  number7: 11,
  number8: 10,

  //正则验证
  regInput1: '13112341234', // 手机号码
  useOldIdCardType: false, // 是否使用身份证旧格式
  regInput2: '310112198808140049', // 身份证

  //自定义验证
  customValTest1: '',
  customValTest2: '',

  //时间
  time1: '16:17:59',
  time2: '99:99',
  time3: '16:17:99',
  time4: '07:45',

  //日期+时间
  datetime1: '',
  datetime2: '2022-08-25 13:01',
  datetime3: '',
  datetime4: '',
  datetime5: undefined as undefined | string,
  datetime6: null as null | string,
  datetime7: null as null | string,
  datetime8: null as null | string,
  dtHalf: ['00','30'],
  showDialog: false,
  date1: '' as string,
  date2: '' as string,

  receiveInfo: [
    {
      label: '体积',
      fieldName: 'cube',
      formatRestrict: '',
      isMandatory: true,
    },
    {
      label: '毛重',
      fieldName: 'gw',
      formatRestrict: '',
      isMandatory: true,
    },
    {
      label: '净重',
      fieldName: 'nw',
      formatRestrict: '',
      isMandatory: true,
    },
  ] as ReceiveInfoBySkuAndAsn[],
  form: {
    cube: '',
    gw: '',
    nw: '',
  },
})

const myLocale = {
  days: '日Sun_一Mon_二Tue_三Wed_四Thu_五Fri_六Sat'.split('_'),
  daysShort: '日S_一M_二T_三W_四T_五F_六S'.split('_'),
  months: '一月Jan_二月Feb_三月Mar_四月Apr_五月May_六月Jun_七月Jul_八月Aug_九月Sep_十月Oct_十一月Nov_十二月Dec'.split('_'),
  monthsShort: '一月Jan_二月Feb_三月Mar_四月Apr_五月May_六月Jun_七月Jul_八月Aug_九月Sep_十月Oct_十一月Nov_十二月Dec'.split('_'),
  firstDayOfWeek: 0, // 0-6, 0 - Sunday, 1 Monday, ...
  format24h: true,
  pluralDay: 'dias'
}

// 待配货的Order列表, orderState为1或2的才符合配货条件
const ordersToAllocate = [
  {orderId: 1, orderNo: 'IVE0000011', orderState: 9},
  {orderId: 2, orderNo: 'IVE0000012', orderState: 1},
  {orderId: 3, orderNo: 'IVE0000013', orderState: 2},
  {orderId: 4, orderNo: 'IVE0000014', orderState: 1},
  {orderId: 5, orderNo: 'IVE0000015', orderState: 4},
  {orderId: 6, orderNo: 'IVE0000016', orderState: 1},
  {orderId: 7, orderNo: 'IVE0000017', orderState: 5},
  {orderId: 8, orderNo: 'IVE0000018', orderState: 1},
  {orderId: 9, orderNo: 'IVE0000019', orderState: 2},
  {orderId: 10, orderNo: 'IVE0000020', orderState: 2},
  {orderId: 11, orderNo: 'IVE0000021', orderState: 2},
  {orderId: 12, orderNo: 'IVE0000022', orderState: 1},
  {orderId: 13, orderNo: 'IVE0000023', orderState: 1},
  {orderId: 14, orderNo: 'IVE0000024', orderState: 1},
  {orderId: 15, orderNo: 'IVE0000025', orderState: 9},
]

interface ReceiveInfoBySkuAndAsn {
  // 字段名
  fieldName: string
  // 是否必填
  isMandatory: boolean
  // 自定义名称
  label: string | null
  // 规则
  formatRestrict: string | null
}

let rulesForm = reactive({
  cube: {},
  form: {
    gw: {},
    nw: {},
    cube: {},
  } as Record<string, any>,
})
const validators = $f.validators
$d.receiveInfo.forEach((item) => {
  // rulesForm.form[item.fieldName] = {
  //   required: validators.required,
  //   int32: validators.int32
  // }
  rulesForm.form[item.fieldName] = {
    required: validators.required,
  }
})

const v$Form = useVuelidate(rulesForm, $d as any, {$autoDirty: true, $scope: false})

const changeRules = function () {
  $d.receiveInfo.forEach((item) => {
    rulesForm.form[item.fieldName] = {
      required: validators.required,
      int32: validators.int32,
    }
  })
}

const changeVal1 = function () {
  $f.ui.singleInputBox({
    defVal: $d.val1.toString(),
    valRule: {
      required: $f.validators.required,
      int32: $f.validators.int32,
    },
    callback: (value, setResult) => {
      $d.val1 = parseInt(value)
      setResult(true)
    },
  })
}

const changeVal2 = function () {
  $f.ui.singleInputBox({
    defVal: $d.val2,
    valRule: {
      required: $f.validators.required,
      maxLength: $f.validators.maxLength(20),
    },
    callback: (value, setResult) => {
      setTimeout(() => {
        $d.val2 = value
        setResult(true)
      }, 1000)
    },
  })
}

const changeVal3 = function () {
  $f.ui.singleInputBox({
    defVal: $d.val3 ?? '',
    callback: (value, setResult) => {
      setTimeout(() => {
        setResult(false, '操作出错:blah blah blah...')
      }, 1000)
    },
  })
}
const changeVal4 = function () {
  $f.ui.singleInputBox({
    defVal: $d.val4,
    text: '请选择日期',
    width: 400,
    valRule: {
      required: $f.validators.required,
      date: $f.validators.date,
    },
    persistent: true,
    showDatePicker: true,
    callback: (value, setResult) => {
      $d.val4 = value
      setResult(true)
    },
  })
}

const changeVal5 = function () {
  $f.ui.singleInputBox({
    defVal: $d.val5,
    text: '请输入日期',
    width: 400,
    valRule: {
      required: $f.validators.required,
      multiFmtDate: $f.validators.multiFmtDate,
    },
    persistent: true,
    callback: (value, setResult) => {
      $d.val5 = value
      setResult(true)
    },
  })
}

const changeVal6 = function () {
  $f.ui.singleInputBox({
    defVal: $d.val6,
    text: '请输入日期',
    width: 400,
    valRule: {
      required: $f.validators.required,
      productionDate6: $f.validators.productionDate6,
    },
    persistent: true,
    callback: (value, setResult) => {
      $d.val6 = value
      setResult(true)
    },
  })
}

const changeVal7 = function () {
  $f.ui.singleInputBox({
    defVal: $d.val7,
    valRule: {
      required: $f.validators.required,
      maxLength: $f.validators.maxLength(20),
    },
    callback: (value, setResult) => {
      $f.axios
        .post('/misc-test/single-value-post-string', {'value': value})
        .then((resp) => {
          console.log(resp.data)
          $d.val7 = value
          setResult(true)
        })
        .catch((err) => {
          setResult(false, $f.getAxiosErrMsg(err))
        })
    },
  })
}

const changeVal8 = function () {
  let valToSet = !$d.val8
  void $f.ui.messageBox({
    caption: '操作确认',
    text: `将会将此值设置为${String(valToSet)}要继续吗?`,
    icon: 'Question',
    buttons: 'OkCancel',
    delayClose: true,
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/misc-test/single-value-post-bool', {'value': valToSet})
        .then((resp) => {
          console.log(resp.data)
          $d.val8 = valToSet
          $f.ui.closeMsgBox()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: '出错了',
            text: $f.getAxiosErrMsg(err),
            icon: 'Error',
            buttons: 'Close',
          })
        })
    }
  })
}

const msgbox1 = function () {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '此动作不可撤销,要继续吗?',
    icon: 'Warning',
    buttons: 'OkCancel',
  }).then((btn) => {
    if (btn === 'ok') {
      console.log('执行...')
    } else {
      console.log('取消')
    }
  })
}

const msgbox2 = function () {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '是否发送报表给A?',
    icon: 'Question',
    buttons: 'YesNo',
  }).then((btn) => {
    if (btn === 'yes') {
      console.log('发送...')
    } else {
      console.log('不发送')
    }
  })
}

const msgbox3 = function () {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '生成报表需要一定的时间，要继续吗?',
    icon: 'Question',
    buttons: 'OkCancel',
    delayClose: true,
  }).then((btn) => {
    if (btn === 'ok') {
      setTimeout(() => {
        $f.ui.closeMsgBox()
      }, 3000)
    }
  })
}

const msgbox4 = function () {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确定打印标签吗(可中断)?',
    icon: 'Question',
    buttons: 'OkCancel',
    delayClose: true,
    disableCancelCloseBtnWhenWorking: false,
    callback: (btn) => {
      if (btn === 'ok') {
        $d.isPrintCanceled = false
        setTimeout(() => {
          if (!$d.isPrintCanceled) {
            $f.ui.closeMsgBox()
          }
        }, 3000)
      } else if (btn === 'cancel') {
        $d.isPrintCanceled = true
        console.log('取消了')
      }
    },
  })
}

const msgbox5 = function () {
  void $f.ui.messageBox({
    text:'单纯文本，不能换行，不能用html富文本',
  })
}

const showScreenLoading1 = function () {
  $f.ui.showScreenLoading()
  //3秒后关闭
  setTimeout(()=>{
    $f.ui.hideScreenLoading()
  }, 3000)
}

const showScreenLoading2 = function () {
  $f.ui.showScreenLoading('执行中，请稍候...')
  //3秒后关闭
  setTimeout(()=>{
    $f.ui.hideScreenLoading()
  }, 3000)
}

const extractDemo1 = function () {
  let orgStrList = $f.misc.extractCompactString($d.field1)
  if (orgStrList.length > 1) {
    $d.field1 = orgStrList[1]
  }
  if (orgStrList.length > 2) {
    $d.field2 = orgStrList[2]
  }
}

const extractDemo2 = function () {
  $d.field2 = $f.misc.tryExtractCompactStringWithIndex($d.field2, 2)
}


const batchExecuteDemo1 = function () {
  $d.batchExecuteItemList = _.map(
    _.filter(ordersToAllocate, (o) => {
      return o.orderState === 1 || o.orderState === 2
    }),
    (o) => {
      return {state: 'pending', id: o.orderId, label: o.orderNo, result: null}
    },
  )
  // 注：实际项目中，要判断batchExecuteItemList是否有值，如果没有值，就不要打开对话框了，出个Notify提示下用户即可
  $d.batchExecuteDlg1 = true
}

const onExeStart = function () {
  $d.batchExecuteState = true
  doAllocate(0)
}
const onExeStop = function () {
  $d.batchExecuteStoppingFlag = true
}

// 模拟执行配货，idx表示batchExecuteItemList的下标
const doAllocate = function (idx: number) {
  if ($d.batchExecuteStoppingFlag || idx > $d.batchExecuteItemList.length - 1) {
    // 用户中断，或执行完成, 这时候可以去刷新列表数据
    $d.batchExecuteStoppingFlag = false
    $d.batchExecuteState = false
    return
  }
  let currentExecuteItem = $d.batchExecuteItemList[idx]
  currentExecuteItem.state = 'executing'
  setTimeout(() => {
    if (idx % 3 === 0) {
      // 失败
      currentExecuteItem.state = 'failed'
      currentExecuteItem.result =
        idx % 2 === 0
          ? '出错了, 这是比较短的出错信息'
          : '出错了, 这是很长的出错信息, 这是很长的出错信息, 这是很长的出错信息, 这是很长的出错信息, 这是很长的出错信息, 这是很长的出错信息, blah blah blah blah blah blah blah blah blah blah blah blah...'
    } else {
      // 成功
      currentExecuteItem.state = 'succeeded'
      currentExecuteItem.result = idx % 2 === 0 ? '成功' : null
    }
    doAllocate(idx + 1)
  }, 1000)
}

const onShow = function () {
  console.log('对话框弹出')
}

const onHide = function () {
  console.log('对话框关闭')
}

// DateTime validation rule
const dtValRules = {
  dt1: {
    dateGreaterThan: $f.validators.dateGreaterThan('2021-12-10'),
  },
  dt2: {
    dateGreaterEqualThan: $f.validators.dateGreaterEqualThan('2021-12-10'),
  },
  dt3: {
    date: $f.validators.dateLessThan('2021-12-15'),
  },
  dt4: {
    date: $f.validators.dateLessEqualThan('2021-12-15'),
  },
  dt5: {
    between: $f.validators.dateBetweenOpen('2021-12-10', '2021-12-15'),
  },
  dt7: {
    between: $f.validators.dateBetweenClose(computed(() => $d.dt6), computed(() => $d.dt8)),
  },
}
const v$Dt = useVuelidate(dtValRules, $d, {$autoDirty: true})
v$Dt.value.$touch()
const e$ = $f.getFieldErrStr

// Number comparison rule
const numCompRules = {
  number1: {
    greaterThan: $f.validators.greaterThan(0),
  },
  number2: {
    greaterEqualThan: $f.validators.greaterEqualThan(0),
  },
  number3: {
    lessThan: $f.validators.lessThan(0),
  },
  number4: {
    lessEqualThan: $f.validators.lessEqualThan(0),
  },
  number5: {
    betweenOpen: $f.validators.betweenOpen(5, 10),
  },
  number7: {
    betweenClosed: $f.validators.betweenClosed(computed(() => $d.number6), computed(() => $d.number8)),
  },
}
const v$Num = useVuelidate(numCompRules, $d, {$autoDirty: true})
v$Num.value.$touch()

// Regex Rule
const regexRules = {
  regInput1: {
    regex: $f.validators.regex(/^1\d{10}$/, '请输入正确的手机号码'),
  },
  regInput2: {
    regex: $f.validators.regex(computed(() => {
      return $d.useOldIdCardType ?
        /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/
        : /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
    }), computed(() => {
      return $d.useOldIdCardType ? '请输入旧15位身份证号码' : '请输入18位身份证号码'
    })),
  },
}

const v$Reg = useVuelidate(regexRules, $d, {$autoDirty: true})
v$Reg.value.$touch()

const errorListDisp1 = function () {
  const param: ErrorListDisplayParams = {
    errorList: [
      '错误1',
      '错误2',
      '错误3',
      '错误4',
      '错误5',
      '错误6',
      '错误7',
      '错误8',
      '错误9',
      '错误10',
      '错误11',
      '错误12',
      '错误13',
      '错误14',
      '错误15',
    ],
  }
  $f.ui.showErrorListDlg(param)
}

const errorListDisp2 = function () {
  const param: ErrorListDisplayParams = {
    msg: '发现以下错误信息，请校对后继续',
    errorList: [
      '错误1',
      '错误2',
      '错误3',
    ],
  }
  $f.ui.showErrorListDlg(param, '业务逻辑A发生错误')
}

const errorListDisp3 = function () {
  const param: ErrorListDisplayParams = {
    msg: '执行完成，成功处理了16条记录，但有3条记录存在问题未能正确处理，请再次确认：',
    showAsWarning: true,
    errorList: [
      '记录112: 状态不正确...',
      '记录113: 状态不正确...',
      '记录116: 状态不正确...',
    ],
  }
  $f.ui.showErrorListDlg(param, '执行完成')
}

const errorListDisp4 = function () {
  const param: ErrorListDisplayParams = {
    msg: '执行完成，成功处理了16条记录，但有3条记录存在问题未能正确处理，请再次确认：',
    showAsWarning: true,
    errorList: [
      '记录112: 状态不正确...',
      '记录113: 状态不正确...',
      '记录116: 状态不正确...',
    ],
  }
  $f.ui.showErrorListDlg(param, '执行完成', true, '继续',() => {
    $f.ui.hideErrorListDlg()
    $f.ui.showNotifySucceeded('成功关闭了errorListDlg')
  })
}

const exportDocxDemoUrl = computed(() => $f.appCfg.apiBaseUrl + '/misc-test/export-docx-demo')

const onMenuItem1Clicked = function () {
  console.log('onMenuItem1Clicked')
}

const onMenuItem2Clicked = function () {
  console.log('onMenuItem2Clicked')
}

const onMenuItem1HelpClicked = function () {
  console.log('onMenuItem1HelpClicked')
}

const customValRules1 = {
  customValTest1: {alwaysRight: $f.validators.alwaysRight}, //必须，至少写一条验证规则，否则不生效
}

const customValRules2 = {
  customValTest2: {required: $f.validators.required},
}

const customValResults1 = reactive({customValTest1: ''})
const customValResults2 = reactive({customValTest2: ''})
const v$CustomVal1 = useVuelidate(customValRules1, $d, {$autoDirty: true, $externalResults: customValResults1})
const v$CustomVal2 = useVuelidate(customValRules2, $d, {$autoDirty: true, $externalResults: customValResults2})

const doCustomVal1 = function () {
  if ($d.customValTest1.length < 5) {
    customValResults1.customValTest1 = '长度应<=5，这是自定义的错误消息'
    return
  }
}
const resetCustomVal1 = function () {
  v$CustomVal1.value.$clearExternalResults()
}

const doCustomVal2 = function () {
  //重置一下
  v$CustomVal2.value.$clearExternalResults()
  // 带额外验证规则的，需要调用默认的$validate()以便先验证默认规则是否符合
  void v$CustomVal2.value.$validate().then((res) => {
    if (res) {
      if ($d.customValTest2.length > 5) {
        customValResults2.customValTest2 = '长度应<=5，这是自定义的错误消息'
        return
      }
      console.log('无错误，继续...')
    }
  })
}
const resetCustomVal2 = function () {
  v$CustomVal2.value.$clearExternalResults()
}

// Time validation rule
const timeValRules = {
  time1: {
    required: $f.validators.required,
    time: $f.validators.time,
  },
  time2: {
    required: $f.validators.required,
    time: $f.validators.time,
  },
  time3: {
    required: $f.validators.required,
    time: $f.validators.time,
  },
  datetime1: {
    datetime: $f.validators.datetime,
  },
  datetime2: {
    required: $f.validators.required,
    datetime: $f.validators.datetime,
  },
  datetime3: {
    datetime: $f.validators.datetime,
  },
  datetime4: {
    required: $f.validators.required,
    datetime: $f.validators.datetime,
    dateGreaterThan: $f.validators.dateGreaterThan(computed(() => $d.datetime3)),
  },
  datetime5: {
    datetime: $f.validators.datetime,
  },
  datetime6: {
    datetime: $f.validators.datetime,
  },
  datetime7: {
    datetime: $f.validators.datetime,
    required: $f.validators.required,
  },
}

const v$Time = useVuelidate(timeValRules, $d, {$autoDirty: true})
v$Time.value.$touch()

const groupModel1 = reactive({
  orderId: 15,
  createDt: '2022-07-19T17:23:40.511Z',
  createP: '0058',
  createPn: '蒋国纲',
  updateDt: '2022-07-19T18:17:30.001Z',
  updateP: '0055',
  updatePn: '李钰',
})

const groupModel2 = reactive({
  orderId: 15,
  updateDt: '2022-07-19T18:17:30.001Z',
  updateP: '0055',
  updatePn: '李钰',
})

const groupModel3 = reactive({
  orderId: 15,
  createDt: '2022-07-19T17:23:40.511Z',
  createP: '0058',
  createPn: '蒋国纲',
})

const groupModel4 = reactive({
  createDt: '2022-07-19T17:23:40.511Z',
  createP: '0058',
  createPn: '蒋国纲',
  updateDt: '2022-07-19T18:17:30.001Z',
  updateP: '0055',
  updatePn: '李钰',
})

const groupModel5 = reactive({})
const groupModel6 = reactive({})

onMounted(() => {
  $d.time1 = $f.fmt.dtFmtHourMinute($d.time1)
})

const longParamGetActionDemo = function () {
  // console.log('yes')
  const params = [1, 2, 3, 4, 11, 22, 33, 44, 1234, 5678, 9011, 1213, 8848, 9910]
  $f.axios.post<string>('comm/utils/prepare-long-params', params)
    .then((resp) => {
      // resp.data
      const urlToGet = $f.misc.makeUrlWithQueryParam('utils-test/long-params-test', {paramsUuid: resp.data})
      return $f.axios.get(urlToGet)
    })
    .then((resp) => {
      console.log('拿到了GET的结果')
      console.log(resp.data)
    })
    .catch((err) => {
      console.log('出错了: ' + $f.getAxiosErrMsg(err))
    })
}

// 平摊
let shareArr = ref([] as number[])
const shareEqually = function () {
  void $f.misc.numberScaleDivide($d.shareNum as number, [1, 1, 1], 3)
    .then((resp) => {
      shareArr.value = resp
    })
    .catch((err) => {
      $f.ui.showNotifyFailed(err.message)
    })
}

// 文本替换
const T = $f.prepareAltLabelTextsFunc('foundation', 'company')

// const labelAltTextsDataForDisp = labelAltTextsData.value

</script>
